﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="BackEnd.WebForm1" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="Scripts/jquery-1.8.3.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var iChannel;
            var iGame;
            var strUsername;
            var strPassword;
            var url = 'ws://' + window.location.hostname + window.location.pathname.replace('Default.aspx', '') + 'wsock.ashx';
            var ws;
            var blogined;
            $('#login').show();
            $('#main').hide();

            $('#cmdLogin').click(function () {
                strUsername = $('#Username').val();
                strPassword = $('#Password').val();

                //url += '?Username=' + strUsername + '&Password=' + strPassword;
                $('#status').val('Connecting to: ' + url);
                ws = new WebSocket(url);
                
                ws.onopen = function () {
                    ws.send("L111|" + strUsername + "|" + strPassword);
                    $('#messages').prepend('Connected <br/>');
                    $('#cmdSend').click(function () {
                        ws.send($('#txtMessage').val());
                        $('#txtMessage').val('');
                    });
                };

                ws.onmessage = function (e) {
                    if (!blogined) {
                        if (e.data == "Login") {
                            blogined = true;
                            $('#login').hide();
                            $('#main').show();
                            $('#chatMessages').prepend("Login successful" + e.data + '<br/>');
                            return;
                        }
                        else if (e.data = "ReLogin")
                        {
                            //alert("Account or password is wrong.");
                            return;
                        }
                    }
                    $('#chatMessages').prepend(e.data + '<br/>');
                };

                ws.onclose = function () {
                    $('#chatMessages').prepend('Closed <br/>');
                };

                ws.onerror = function (e) {
                    $('#chatMessages').prepend('Oops something went wront <br/>');
                };

            })

            $('#cmdLeave').click(function () {
                ws.close();
            });
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <div id="login">
        <div>
            Username
            <input type="text" id="Username" />
        </div>
        <div>
            Password
            <input type="password" id="Password" />
        </div>
        <div>
            <input id="cmdLogin" type="button" value="Login"/>
        </div>
        <div id="status"></div>
    </div>
    <div id="main" style="height:600px">
        <div id="board">
            <div id="channels"></div>
            <div id="games"></div>
        </div>
        <div id="chat">
            <input id="txtMessage" size="50"/>
            <input id="cmdSend" type="button" value="Send" />
            <input id="cmdLeave" type="button" value="Leave" />
            <br />
            <div id="chatMessages" />
        </div>
    </div>
    </div>
    </form>
</body>
</html>
